<template>
    <view class="main">
        <view class="search-box">
            <van-search v-model="searchKey" placeholder="搜索" shape="round"
                @search="$goUrl(`/pages/index/pages/searchPage?key=${searchKey}&type=${searchType}`)" />
        </view>
        <view class="content">
            <view class="history-title dispaly-just-between">
                <view class="title-text">历史搜索</view>
                <view class="icon" @click="deleteHistory">
                    <image src="/static/icon/del.png" mode="aspectFill" />
                </view>
            </view>
            <view class="history-box">
                <view @click="clickHistoryItem(item)" class="history-item dispaly-align-center"
                    v-for="(item, index) in historyList" :key="index">{{
                        item }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { getHistoryList, clearHistory } from '@/api/apiList'

const searchType = ref('')
onLoad((option) => {
    searchType.value = option.type ? option.type : ''
    getListData()
})

const searchKey = ref('')
const historyList = ref([])

const getListData = async () => {
    const res = await getHistoryList({ type: searchType.value })
    if (res.code == 200) {
        historyList.value = res.data
    }
}

// 删除历史记录
const deleteHistory = () => {
    uni.showModal({
        title: '提示',
        content: '删除历史记录',
        success: async (i) => {
            if (i.confirm) {
                const res = await clearHistory({ type: searchType.value })
                if (res.code == 200) {
                    uni.showToast({
                        title: '清除成功',
                        icon: 'none'
                    })
                }
                getListData()
            }
        }
    })
}

// 点击历史记录
const clickHistoryItem = (item) => {
    searchKey.value = item
    uni.navigateTo({
        url: `/pages/index/pages/searchPage?key=${searchKey.value}&type=${searchType.value}`
    })
}

</script>

<style lang="scss" scoped>
.main {
    .content {
        padding: 30rpx;

        .history-title {
            margin-bottom: 28rpx;

            .title-text {
                font-family: PingFang SC Heavy;
                font-size: 28rpx;
                font-weight: 900;
                color: #111111;
            }

            .icon {
                image {
                    width: 34rpx;
                    height: 34rpx;
                }
            }
        }

        .history-box {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .history-item {
                margin: 10rpx;
                padding: 18rpx 24rpx;
                border-radius: 30rpx;
                background: #FFFFFF;
            }
        }
    }

}
</style>